<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
         
          <!-- card body -->
          <el-table :data="list" border stripe>
            <el-table-column
      type="index"
      label="#"
      width="50">
    </el-table-column>
            <el-table-column 
              prop="id"
              
              label="订单编号"
              >
            </el-table-column>
            <el-table-column 
              prop="payType"
              
              label="支付方式"
              >
              <template v-slot="scope">
                <el-button type="primary" v-if="scope.row.payType == 0" size="default" @click="">未支付</el-button>
                <el-button type="primary" v-if="scope.row.payType == 1" size="default" @click="">
                  <svg-icon icon-class="alipay" />
                </el-button>
                <el-button type="primary" v-if="scope.row.payType == 2" size="default" @click="">
                  <svg-icon icon-class="weixin" />
                </el-button>
                
              </template>
            </el-table-column>
            <el-table-column 
              prop="payType"
              
              label="订单状态"
              >
              <template v-slot="scope">
                <el-button  type="danger" v-if="scope.row.status == 0" size="default" @click="">待付款</el-button>
                <el-button type="primary" v-else-if="scope.row.status == 1" size="default" @click="">待发货</el-button>
                <el-button type="primary" v-else-if="scope.row.status == 2" size="default" @click="">已发货</el-button>
                <el-button type="primary" v-else-if="scope.row.status == 3" size="default" @click="">已完成</el-button>
                <el-button type="primary" v-else-if="scope.row.status == 4" size="default" @click="">退货中</el-button>
                <el-button type="primary" v-else size="default" @click="">无效订单</el-button>
                
                
              </template>
            </el-table-column>
            <el-table-column 
              prop="createTime"
              
              label="添加时间"
              >
            </el-table-column>
            <el-table-column 
              prop="createTime"
              
              label="操作"
              >
                <template v-slot="scope">
                  <el-button type="primary" size="default" @click="goOrderInfo(scope.row.id)">查看订单</el-button>
                  
                </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="start"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-card>
        
    </div>
</template>

<script>
import {
  findOrdersByPage
} from "@/api/orderManage/order"
import mix from "@/mixins/index"
export default {
  mixins:[mix],
    data() {
        return {
         
          formData:{
            "deliverySn": "",
            "id": "",
            "memberUsername": "",
            "orderSn": "",
            "orderType": "",
            "payType": "",
            "sourceType": "",
            "status": ""
          },
          list:[]
        };
    },
    computed: {

    },
    created() {
      this.init()
    },
    mounted() {

    },
    methods: {
      goOrderInfo(id){
        this.$router.push(`/orderManage/orderInfo/${id}`)
      },
      init(){
        findOrdersByPage(this.start,this.limit,this.formData)
        .then(res =>{
          console.log(res)
          this.list = res.data.rows;
          this.total = res.data.total
        })
      },
      
    },
};
</script>

<style scoped lang="scss">

</style>
